<template>
	<uv-modal ref="modal" 
		:align="align" 
		:title="title" 	
		:cancelColor="cancelColor" 
		:confirmColor="confirmColor" 
		:showCancelButton="showCancelButton"
		:confirmText="confirmText"
		:cancelText="cancelText"
		@confirm="confirm"
		@cancel="onCancel"
		@close="onCancel" 
	>
		<view class="ss-p-x-56 ss-p-b-40">
			<scroll-view v-if="parse" scroll-y="true" :style="{height:parseHeight}">
				<uv-parse :content="content"></uv-parse>	
			</scroll-view>
			<view v-if="$slots['content']">
				<slot name="content"></slot>
			</view>
			<view class="ss-w-100" :style="{color:contentColor,textAlign:align}" v-else> {{ content }} </view>
		</view>	
	</uv-modal>
</template>

<script setup>
import { computed } from "vue";
	const props = defineProps({
		modelValue:{
			type:Boolean,
			default:false
		},
		title:{
			type:String,
			default:'温馨提示'
		},
		content:{
			type:String,
			default:''
		},
		cancelText:{
			type:String,
			default:'取消'
		},
		confirmText:{
			type:String,
			default:'确认'
		},
		parse:{
			type:Boolean,
			default:false
		},
		parseHeight:{
			type:String,
			default:'60vh'
		},
		contentColor:{
			type:String,
			default:'#666666'
		},
		confirmColor:{
			type:String,
			default:'#F38221'
		},
		showCancelButton:{
			type:Boolean,
			default:true
		},
		cancelColor:{
			type:String,
			default:'#657180'
		},
		align:{
			type:String,
			default:'center'
		},
		confirmClose:{ // 点确认是否关闭
			type:Boolean,
			default:false
		}
	})
	const emit = defineEmits(['update:modelValue','confirm'])
	const state = reactive({
		show:false
	})
	const modal = ref()
	watch(() => props.modelValue,(value) => {
		emit('update:modelValue',value)
		if(value) modal.value.open()
		else modal.value.close()
	})
	const onCancel = () => {
		emit('update:modelValue',false)
	}
	const confirm = () => {		
		// emit('update:modelValue',false)
		if(props.confirmClose) onCancel()
		emit('confirm')
	}
</script>

<style lang="scss" scoped>
	:deep .uv-modal__content {
		justify-content:left !important;
	}
</style>